<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            html,body,ul{
                margin: 0;
                padding: 0;
            }
            html,body{height: 100%;}

            .clearfix:after{
                clear: both;
            }
            .clearfix:after,.clearfix:before{
                content: "";
                display: table;
            }
            .slide-view{
                height: 100%;
                overflow: hidden;
                position: relative;
            }
            .slider{
                height: 100%;
                list-style-type: none;
            }
            .slider li{
                position: absolute;
                left: 0;
                right: 0;
                height:100%;
                opacity: 0;
            }
            .slider li img{
            	display: block;
            	width: 100%;
            	max-width: 100%;
            }
            .active{
                opacity: 1 !important;
            }
            
            .hor-slide-ani .prev-out
            {
                animation: hor-slide-prev-out .8s forwards cubic-bezier(0.7, 0, 0.3, 1);
            }
            .hor-slide-ani .prev-in{
                animation: hor-slide-prev-in .8s forwards cubic-bezier(0.7, 0, 0.3, 1);
            }
            
            .hor-slide-ani .next-out
            {
                animation: hor-slide-next-out .8s forwards cubic-bezier(0.7, 0, 0.3, 1);
            }
            .hor-slide-ani .next-in{
                animation: hor-slide-next-in .8s forwards cubic-bezier(0.7, 0, 0.3, 1);
            }
            @keyframes hor-slide-prev-out{
                from{
                    opacity: 1;
                }
                to{
                    opacity: 1;
                    transform: translateX(100%);
                }
            }
            @keyframes hor-slide-prev-in{
                from{
                    opacity: 1;
                    transform: translateX(-100%);
                }
                to{
                    opacity: 1;
                    transform: translateX(0);
                }
            }
            
			@keyframes hor-slide-next-out{
                from{
                    opacity: 1;
                }
                to{
                    opacity: 1;
                    transform: translateX(-100%);
                }
            }
            @keyframes hor-slide-next-in{
                from{
                    opacity: 1;
                    transform: translateX(100%);
                }
                to{
                    opacity: 1;
                    transform: translateX(0);
                }
            }
            .prev{
                position: absolute;
                left: 10px;
                top: 40%;
                display: block;
                padding: 10px;
                text-align: center;
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background: rgba(0,0,0,.4);
                color: white;
                font-size: 22px;
                line-height: 22px;
                cursor:pointer;
                
                opacity: 0;
                transition: all .3s cubic-bezier(0, 0, 0.2, 1);
                
            }
            .next{
                position: absolute;
                right: 10px;
                top: 40%;
                display: block;
                padding: 10px;
                text-align: center;
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background: rgba(0,0,0,.4);
                color: white;
                font-size: 22px;
                line-height: 22px;
                cursor:pointer;
                
                opacity: 0;
                transition: all .3s cubic-bezier(0, 0, 0.2, 1);
            }
            .btns{
                position: absolute;
                bottom: 15px;
                left: 50%;
                transform: translateX(-50%);
                text-align: center;
                font-size: 0;
                background: rgba(0,0,0,.46);
                border-radius: 10px;       
            }
            .btns .active{
            	background:white;
            }
            .btns ul {
            	display: inline-block;
            	list-style-type: none;
            	padding: 5px;
            }
            .btns li{
            	display: inline-block;
                width: 10px;
                height: 10px;
                line-height: 10px;
                border-radius: 100%;
                background: #e2e2e2;
                margin: 0 3px;
                cursor: pointer;
            }
            .slide-view:hover .prev{
            	opacity: 1;
            	left: 15px;
            }
            .slide-view:hover .next{
            	opacity: 1;
            	right: 15px;
            }
        </style>
    </head>
    <body>
        <div class="slide-view">
            <ul class="slider hor-slide-ani" style="position: relative;">
                <li class="active" style="background: salmon;">natural1</li>
                <li style="background: darkcyan;"><img src="img/natural2.jpg"/></li>
                <li style="background: seagreen;"><img src="img/natural3.jpg"/></li>
                <li style="background: sandybrown;"><img src="img/natural4.jpg"/></li>
            </ul>
            <div class="control">
                <span class="prev">&larr;</span>
                <span class="next">&rarr;</span>
            </div>
           	
           	<div class="btns">
	        	<ul>
	                <li class="active"></li>
	                <li></li>
	                <li></li>
	                <li></li>
	            </ul>
	        </div>	
        </div>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.0.0/jquery.js"></script>
        <script>
            var aniName = (function(el) {
              var animations = {
                animation: 'animationend',
                OAnimation: 'oAnimationEnd',
                MozAnimation: 'mozAnimationEnd',
                WebkitAnimation: 'webkitAnimationEnd',
              };
        
              for (var t in animations) {
                if (el.style[t] !== undefined) {
                  return animations[t];
                }
              }
              return false;
            })(document.createElement('div'));
            
            var aniEndCallback=function($ele,endCall){
                if(aniName && typeof endCall == 'function'){
                    var called=false;
                    //在每次transitionEnd的事件后执行该函数
                    var callback = function(){ 
                        if (!called){
                            called=true;
                            endCall($ele);
                        }  
                    };
                    $ele[0].addEventListener(aniName,function(){
                        callback();
                        //通过setTimeout来补救windowphone中不触发事件的问题
                        setTimeout(callback,200);
                    },false);
                }else{
                    endCall($ele);
                }         
            };
            
            
            var aniStatus = false
            	, timer = null
            	, enableAutoPlay = false
               	, $slider = $(".slider")
            	, $slideItems = $slider.children()
            	, curPageIndex = $slider.find('.active').index()
            	, switchType = 'next';//向前切还是向后切
            	
            	
            
            $(function(){
                $('.next').click(function(){
                    if(aniStatus){return};
                    aniStatus = true;
                    setSwitchType('next');
					var nextPageIndex = getNextPageIndex();
					switchPage(nextPageIndex);
                });
                
                $('.prev').click(function(){
                    if(aniStatus){return;}//不在动画状态，才能执行
                    aniStatus= true;
                    setSwitchType('prev')
                    var nextPageIndex = getNextPageIndex();
                    switchPage(nextPageIndex);
                });
             	
             	$('.btns').find('li').click(function(){
             		if(aniStatus){return;}//不在动画状态，才能执行
             		aniStatus = true;
             		var nextPageIndex = $(this).index();
             		switchType = getSwtichType(nextPageIndex);
             		switchPage(nextPageIndex);
             	});
             	
                function autoPlay(){
            		enableAutoPlay = true;
            		if(aniStatus){return;}
                	clearInterval(timer);
                	timer = setInterval(function(){
                		$('.next').trigger('click');
                	},2000);
                }
                
                // autoPlay();
                
                //获取下一页Index
                function getNextPageIndex(){
                	var nextPageIndex = 0;
                	if(switchType == 'next'){
                		nextPageIndex = curPageIndex + 1;
                		if(curPageIndex == $slideItems.length-1){
	                    	nextPageIndex = 0
	                    }
                	}else if(switchType == 'prev'){
                		nextPageIndex = curPageIndex - 1;
	                    if(curPageIndex == 0){
	                        nextPageIndex = $slideItems.length-1;
	                    }
                	}
                	return nextPageIndex;
                }
                
                function switchPage(pageIndex){
                	$slideItems.eq(curPageIndex).addClass(switchType+'-out');
                    $slideItems.eq(pageIndex).addClass(switchType+'-in');
                    $(".btns").find('li').removeClass('active').eq(pageIndex).addClass('active');
                    
                    aniEndCallback($slider.find('.active'),function($ele){
                        aniStatus = false;
						setActivePage(pageIndex);
						if(enableAutoPlay){
							autoPlay();
						} 
                    });
                }
                
                //设置切换类型
                function setSwitchType(type){
                	switchType = type;
                }
                
                function setActivePage(pageIndex){
                	$slideItems.eq(curPageIndex).removeClass(switchType+'-out active');
                    $slideItems.eq(pageIndex).removeClass(switchType+'-in').addClass('active');
                    curPageIndex = pageIndex;
                };
                
                
                function getSwtichType(pageIndex){
                	if(pageIndex == curPageIndex){return;}
                	if(pageIndex < curPageIndex){
                		switchType = 'prev';
                	}else{
                		switchType = 'next';
                	}
                	return switchType;
                }
                
               
                
            });
              
        </script>
	</body>
</html>